<template>
	<view class="mask" v-if="show">
		<view class="warp" :style="{height:height+'px'}">
			<view class="rect" @click.stop="open">
				<image class="bg" :src="activityInfo.picUrl"></image>
			</view>
			<view class="line"></view>
			<image class="close" @click.stop="close"
				src="https://oss.jxhecong.com/v2/image/version_close@2x.png"></image>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			show:{
				type:Boolean,
				default:false
			},
			activityInfo:{
				type:Object,
				default:{}
			}
		},
		data(){
			return{
				
			}
		},
		mounted() {
			const res = uni.getSystemInfoSync();
			const system = res.platform;
			this.height = res.windowHeight;
		},
		methods:{
			close() {
				this.$emit('close')
			},
			open(){
				this.$emit('open')
			}
		}
	}
</script>

<style lang="scss" scope>
	.mask {
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		z-index:9999;
		background-color:rgba(0,0,0,0.5);
	}
	
	.warp {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.rect {
		position: relative;
		width: 600rpx;
		height: 660rpx;
		background-color: white;
		border-radius: 20rpx;
	}
	
	.bg {
		position: relative;
		width: 600rpx;
		height: 660rpx;
	}
	.line {
		margin-top: 0rpx;
		width: 1rpx;
		height: 72rpx;
		background-color: #FFFFFF;
	}
	
	.close {
		margin-top: 0rpx;
		width: 60rpx;
		height: 60rpx;
	}
</style>